Understanding the DOM helps you design, debug and maintain your CSS

Original HTML

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>
Copy

This below is the DOM Tree

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
    └─ "Sheets"
Copy

If we apply a css to that HTML

span {
  border: 1px solid black;
  background-color: lime;
}
Copy

This is how it applies HTML and CSS to the DOM

1. The browser parses the HTML and creates a DOM from it.
2. Next, it parses the CSS. The CSS here has a span selector, It applies that to each one of the three <span>s,
3. Then paints the final visual representation to the screen.